import React from 'react';
import { AutoComplete, Card } from 'antd';
import { Form, Input, Button, Checkbox, Select, message } from 'antd';

import axios from 'axios';
import { Url } from '../url';
const { Option } = Select;
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};

export class AddUser extends React.Component {
    onFinish = (values) => {
        //delete the unuseful propertise
        values["admin"] = values.role === "admin";

        delete values.role;
        delete values.confirm;
        delete values.agreement;
        //post the information to backend
        axios.post(Url.register, values)
            .then((response) => {
                if (response.data.success === false) {
                    message.error(response.data.errorMessage);
                } else {
                    message.success('Add User succeed');
                }
            })
            .catch((error) => {
                message.error("Network Error");
                console.log(error);
            });
    };

    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }

    render = () => {
        return (

            <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
                <Card title="Add User" style={{ width: 450, marginTop: 15 }}>
                    <Form
                        {...formItemLayout}
                        name="basic"
                        // labelCol={{ span: 8 }}
                        // wrapperCol={{ span: 16 }}
                        initialValues={{ remember: true }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <Form.Item
                            label="Username"
                            name="userId"

                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input placeholder="Please input your username" />
                        </Form.Item>

                        <Form.Item
                            label="Password"
                            name="password"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Input.Password placeholder="Please input your password" />
                        </Form.Item>

                        <Form.Item
                            name="confirm"
                            label="Confirm Password"
                            dependencies={['password']}
                            hasFeedback
                            rules={[
                                {
                                    required: true,
                                    message: 'Please confirm your password!',
                                },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('The two passwords that you entered do not match!'));
                                    },
                                }),
                            ]}
                        >
                            <Input.Password placeholder="Please input your password again" />
                        </Form.Item>

                        <Form.Item
                            label="Address"
                            name="address"
                            rules={[{ required: true, message: 'Please input your Address!' }]}
                        >
                            <Input placeholder="Please input your Address" />
                        </Form.Item>

                        <Form.Item
                            label="Phone"
                            name="mobile"
                            rules={[{ required: true, message: 'Please input your phone number!' }]}
                        >
                            <Input style={{ width: '100%' }} />
                        </Form.Item>

                        <Form.Item
                            label="Gender"
                            name="sex"
                            rules={[{ required: true, message: 'Please select gender!' }]}
                        >
                            <Select placeholder="select your gender">
                                <Option value="male">Male</Option>
                                <Option value="female">Female</Option>
                                <Option value="other">Other</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="Email"
                            name="email"
                            rules={[{ required: true, message: 'Please input your Email!' }]}
                        >
                            <Input placeholder="Please input your Email" />
                        </Form.Item>

                        <Form.Item
                            label="Name"
                            name="name"
                            rules={[{ required: true, message: 'Please input your Name!' }]}
                        >
                            <Input placeholder="Please input your Name" />
                        </Form.Item>

                        <Form.Item
                            label="Company"
                            name="company"
                            rules={[{ required: true, message: 'Please input your Company!' }]}
                        >
                            <Input placeholder="Please input your Company" />
                        </Form.Item>

                        <Form.Item
                            label="Role"
                            name="role"
                            rules={[{ required: true, message: 'Please select a role' }]}
                        >
                            <Select placeholder="select a role">
                                <Option value="admin">Admin</Option>
                                <Option value="user">User</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item
                            name="agreement"
                            valuePropName="checked"
                            rules={[
                                {
                                    validator: (_, value) =>
                                        value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
                                },
                            ]}
                            {...tailFormItemLayout}
                        >
                            <Checkbox>
                                I have read the <a href="" target="_blank">agreement</a>
                            </Checkbox>
                        </Form.Item>
                        <Form.Item {...tailFormItemLayout}>
                            <Button type="primary" htmlType="submit">
                                Register
                            </Button>
                        </Form.Item>

                    </Form>
                </Card>
            </div>

        )
    }
}